<template>
	<view :data-theme="theme" class="container" v-if="activityData && activityData.id">
		<view class="card">
			<view class="header">
				<!-- 头部导航 -->
				<view class="header-nav">
					<view class="header-nav-left">
						<span
							:style="{color: 'white',backgroundColor: bgColor,marginRight:'10rpx',padding: '0 5rpx'}">减</span><span
							style="font-weight: bold;">店铺满减</span>
					</view>
					<view class="header-nav-right">
						<view :style="{color: styleColor[activityData.status],marginRight:'10rpx'}">
							{{activityData.status}}
						</view>
						<view>
							{{activityData.activityTimeList[0].slice(0,10)}}-{{activityData.activityTimeList[1].slice(0,10)}}
						</view>
					</view>
				</view>
				<view class="header-body">
					<view class="header-body-top">
						<uni-data-picker placeholder="请选择售卖区域" popup-title="请选择所在地区" :readonly="true"
							:clear-icon="false" :localdata="cityCodeList"
							v-model="activityData.activityScopeList[0][1]">
						</uni-data-picker>
					</view>
					<view class="header-body-bottom">
						<u-tag style="margin-right: 10rpx;margin-bottom: 10rpx;" v-for="(item,index) in giftGoodsInfo"
							:key="index" :text="item.value" :color="bgColor" bgColor="#f5f5f5"
							borderColor="#f5f5f5"></u-tag>
					</view>
				</view>
			</view>
			<!-- 促销类型 -->

		</view>

		<view class="card">
			<view>
				<view class="content-text">
					<u-tabs :list="tabList" :scrollable="false" :lineWidth="30" :lineColor="bgColor" :current="tabIndex"
						:activeStyle="{ color: '#000'}" @click="tabChange" :inactiveStyle="{color:'#4c4d51'}"></u-tabs>
					<view v-if="tabIndex == 0">
						<view class="content"
							style="display: flex;line-height: 90rpx;align-items: center;margin-left: 30rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">活动销售数据</view>
						</view>
						<uni-row class="demo-uni-row"
							style="font-size: 30rpx;color: #999;background-color: #fff;padding: 20rpx 10rpx;align-items: center;text-align: center;">
							<!-- <uni-col :span="8">
								<view class="demo-uni-col dark">参与客户</view>
							</uni-col> -->
							<uni-col :span="8">
								<view class="demo-uni-col dark">活动营业额</view>
							</uni-col>
							<!-- <uni-col :span="8">
								<view class="demo-uni-col dark">活动成本</view>
							</uni-col> -->

						</uni-row>
						<uni-row class="demo-uni-row"
							style="font-size: 30rpx;color: #000;background-color: #fff;padding: 20rpx 10rpx;align-items: center;text-align: center;">

							<!-- <uni-col :span="8">
								<view class="demo-uni-col dark">{{activityData.inventory}}</view>
							</uni-col> -->
							<uni-col :span="8">
								<view class="demo-uni-col dark">{{activityData.salesVolume}}</view>
							</uni-col>
							<!-- <uni-col :span="8">
								<view class="demo-uni-col dark">{{activityData.inventory}}</view>
							</uni-col> -->

						</uni-row>
					</view>
					<view v-if="tabIndex == 1">
						<view class="content"
							style="display: flex;line-height: 90rpx;align-items: center;margin-left: 30rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">活动销售数据</view>

						</view>
						<view class="name-param1">
							<text style="margin-left: 30rpx;font-size: 14px;color: #999;margin-right: 10px;">开始时间</text>
							<text>{{activityData.activityTimeList[0]}}</text>
						</view>
						<view class="name-param1">
							<text style="margin-left: 30rpx;font-size: 14px;color: #999;margin-right: 10px;">结束时间</text>
							<text>{{activityData.activityTimeList[1]}}</text>
						</view>

						<view class="content"
							style="display: flex;line-height: 90rpx;align-items: center;margin-left: 30rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">活动成本</view>

						</view>
						<view class="name-param1">
							<text
								style="margin-left: 30rpx;font-size: 14px;color: #999;margin-right: 10px;flex-shrink: 0;font-weight: bold;">承担方式</text>
							<text>合作商自行承担100%,平台承担0%</text>
						</view>
						<view class="content"
							style="display: flex;line-height: 90rpx;align-items: center;margin-left: 30rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">使用条件</view>

						</view>
						<view class="name-param1">
							<text style="margin-left: 30rpx;font-size: 14px;color: #999;margin-right: 10px;">客户范围</text>
							<text>全部客户</text>
						</view>
						<view class="name-param1">
							<text style="margin-left: 30rpx;font-size: 14px;color: #999;margin-right: 10px;">商品范围</text>
							<view style="display: flex;" @click="handlePopup"><text
									:style="{color:activityData.productScope == 0 ? '' : bgColor}">{{activityData.productScope == 1 ? '部分商品参与' : activityData.productScope == 2 ? '部分品类参与':'全店参与'}}</text>
								<u-icon name="arrow-right" size="15" :color="bgColor"
									v-if="activityData.productScope != 0"></u-icon>
							</view>

						</view>
						<view class="name-param1">
							<text
								style="margin-left: 30rpx;font-size: 14px;color: #999;margin-right: 10px;">单客户单日限购</text>
							<text>{{activityData.customerDailyLimit == -1 ?'不限单':'限' +activityData.customerDailyLimit+ '件'}}</text>
						</view>
						<view class="name-param1">
							<text
								style="margin-left: 30rpx;font-size: 14px;color: #999;margin-right: 10px;">活动总限购单数</text>
							<text>{{activityData.totalOrderLimit == -1 ?'不限单':'限' +activityData.totalOrderLimit+ '件'}}</text>
						</view>
					</view>
					<view v-if="tabIndex == 2">
						<view v-for="(item,index) in proRecordList" :key="index"
							style="color: #080808;font-size: 28rpx;padding-bottom: 30rpx;color: #000;">
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									操作人
								</view>
								<view style="flex: 3;">
									{{item.operator}}
								</view>
							</view>
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									操作动作
								</view>
								<view style="flex: 3;">
									{{item.operationAction}}
								</view>
							</view>
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									详细信息
								</view>
								<view style="flex: 3;">
									<view
										style="display: flex;flex-flow: column;flex: 1;margin: 0 6px 0 0;font-size: 28rpx;">

										<view>
											<text style="margin-right: 10px;">活动类型:</text>
											<text>店铺满减</text>
										</view>
										<view>
											<text style="margin-right: 10px;">活动日期:</text>
											<text>{{activityData.activityTimeList[0]}}至{{activityData.activityTimeList[0]}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">售卖区域:</text>
											<text><uni-data-picker style="display: inline-block;" placeholder="请选择售卖区域"
													popup-title="请选择所在地区" :readonly="true" :clear-icon="false"
													:localdata="cityCodeList"
													v-model="activityData.activityScopeList[0][1]">
												</uni-data-picker></text>
										</view>
										<view>
											<text style="margin-right: 10px;">活动详情:</text>
											<text v-for="(item,index2) in giftGoodsInfo" :key="index2"
												style="margin-right:20rpx;">{{item.value}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">补贴承担:</text>
											<text>合作商自行承担100%,平台承担0%</text>
										</view>
										<view style="display: flex;align-items: center;" @click="handlePopup">
											<text style="margin-right: 10px;">商品范围:</text>
											<text :style="{color:activityData.productScope == 0 ? '' : bgColor}">
												{{activityData.productScope == 1 ? '部分商品参与' : activityData.productScope == 2 ? '部分品类参与':'全店参与'}}</text>
											<u-icon style="display: inline-block;" name="arrow-right" size="15"
												:color="bgColor" v-if="activityData.productScope != 0"></u-icon>
										</view>
										<view>
											<text style="margin-right: 10px;">客户范围:</text>
											<text>全部客户</text>
										</view>

										<view>
											<text style="margin-right: 10px;">单客户单日限购:</text>
											<text>{{activityData.customerDailyLimit == -1 ?'不限单':'限' +activityData.customerDailyLimit+ '件'}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">活动总限购单数:</text>
											<text>{{activityData.totalOrderLimit == -1 ?'不限单':'限' +activityData.totalOrderLimit+ '件'}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 110rpx;">
				</view>
			</view>
		</view>


		<view
			v-if="activityData && activityData.enrolledActivityProductVoList && activityData.enrolledActivityProductVoList.length"
			class="footer"
			style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;align-items: center;">
			<view style="display: flex;">
				<button :color="bgColor" :loading="loading"
					style="border-radius: 10px;background-color: #f0f0f0;padding: 20rpx;flex: 1;margin: 0 10rpx;color: #000;"
					@click="cancelActivity()">取消活动</button>
			</view>
		</view>
		<ProductPopup ref="productPopupRefs" :activityData="activityData"
			@getNoRegistrationActivity="getNoRegistrationActivity"></ProductPopup>
	</view>
</template>

<script>
	import {
		addActivityRegistrationApi,
		getNoRegistrationActivityApi
	} from "@/api/marketing.js";
	import ProductPopup from "./productPopup.vue"
	import {
		setThemeColor
	} from '../../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			ProductPopup
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				activityData: {},
				// 操作记录
				proRecordList: [],
				tabList: [{
					name: '活动数据',
					type: 1,
				}, {
					name: '活动规则',
					type: 2,
				}, {
					name: '操作记录',
					type: 3,
				}],
				tabIndex: 1,
				// productFrom: {},
				loading: false,
				styleColor: {
					'未开始': 'black',
					'活动中': 'green',
					'已结束': 'red',
					'未开启': '#808080'
				},
				cityCodeList: [], // 城市分类
				giftGoodsInfo: [], // 减品信息
			}
		},

		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let that = this;
			this.getNoRegistrationActivity()
			that.cityCodeList = JSON.parse(options.cityCodeList)
		},
		methods: {
			/** 取消活动 */
			cancelActivity() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该满减活动吗?',
					success(res) {
						if (res.confirm == true) {
							that.deleteActivityRegistration()
						}
					},
				})
			},
			// 删除商品或品类
			async deleteActivityRegistration() {
				let data = {
					id: this.activityData.id,
					activityCategory: 8,
					activityTimeList: this.activityData.activityTimeList,
					promotionInventory: this.activityData.promotionInventory,
					customerDailyLimit: this.activityData.customerDailyLimit,
					productScope: this.activityData.productScope,
					addEnrolledActivityProductDTOList: this.activityData.enrolledActivityProductVoList.map(
						item => {
							return {
								businessSign: 3, // 1添加  2编辑 3删除
								enrolledActivityId: item.enrolledActivityId,
							}
						})
				}
				let that = this;
				that.loading = true;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				try {
					let res = await addActivityRegistrationApi(data)
					if (res.code == 200) {
						that.loading = false;
						uni.showModal({
							title: '提示',
							content: '删除成功,点击确认回到店铺满减首页',
							showCancel: false,
							success: (res) => {
								if (res.confirm == true) {
									uni.redirectTo({
										url: '/pages/marketing/fullDiscountList/index'
									})
								}
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 1500
					})
				}

				uni.hideLoading()
			},
			tabChange(item) {
				this.tabIndex = item.index;
			},
			// 处理弹框
			handlePopup() {
				// 商品范围为全店时没有弹框详情
				if (this.activityData.productScope != 0) {
					this.$refs.productPopupRefs.openPopup(this.activityData)
				}
			},
			// -------------------------------api-----------------------------------
			// 获取活动商品信息
			async getNoRegistrationActivity() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				try {
					let res = await getNoRegistrationActivityApi(7)
					if (res.code == 200) {
						this.activityData = res.data
						// 判断有没有部分商品数据
						if (this.activityData.enrolledActivityProductVoList && this.activityData
							.enrolledActivityProductVoList.length > 0) {
							this.proRecordList = this.activityData.enrolledActivityProductVoList[0]
								.activeProductOperationRecordList
						}
						// 判断回显的数据是不是部分品类  有没有品类数据
						if (this.activityData.productScope == 2 && this.activityData.proCategoryCacheVoList && this
							.activityData.proCategoryCacheVoList.length) {
							this.activityData.proCategoryCacheVoList = this.activityData.proCategoryCacheVoList.map(
								item => {
									return {
										...item,
										collapsed: false
									}
								})

						}
						this.giftGoodsInfo = this.activityData.activitySubsidyList.map(item => {
							let text = ''
							if (item.type == 3) {
								text = `满${item.condition}减${item.subsidy}`
							} else {
								text = `满${item.condition}减${item.subsidy}`
							}
							return {
								value: text
							}
						})

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e,
						duration: 2000,
						icon: 'none'
					})
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	// // #ifndef APP-PLUS */
	// page {
	// 	width: 100%;
	// 	min-height: 100%;
	// 	// display: flex;
	// }

	// /* #endif

	page {
		height: 100%;
	}

	::v-deep .input-value-border {
		border: none
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $coupons-light-color5;
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.header {
			.header-nav {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				.header-nav-left {}

				.header-nav-right {
					display: flex;
					align-items: center;
				}
			}

			.header-body {
				padding: 20rpx 0;

				.header-body-top {
					padding-bottom: 20rpx;
				}

				.header-body-bottom {
					display: flex;
					flex-flow: wrap;
				}
			}


		}

		.name-param {
			margin: 16rpx 0;
			display: flex;
			flex-flow: row;
			// justify-content: space-between;
		}
	}

	.name-param1 {
		margin: 16rpx 0;
		display: flex;
		flex-flow: row;
		align-items: center;
		// justify-content: space-between;
	}


	.header-top {
		display: flex;
		justify-content: space-between;

		.header_name {
			font-size: 31rpx;
			font-weight: bolder;
		}
	}

	.top_content_sign {
		color: #8d8d8d;
		font-size: 28rpx;
		position: absolute;
		right: -30rpx;
		top: -32rpx;
		padding: 6rpx;
		border-radius: 0 10rpx 0 16rpx;
		background-color: #f0f0f0;
	}

	.border-item {
		border-bottom: 1px solid #f3f3f3;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 820rpx;

		.scroll-view {
			height: 100%;
		}
	}
</style>